<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">运单列表</a></el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div>
                <h2>运单列表</h2>
                <div class="Submit-AddFixing">
                    <el-button type="primary" @click="PushAddOrder">添加运单</el-button>
                </div>
            </div>
            <el-table :data="OrderList" border stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="ordername" label="发货单号">
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间">
                </el-table-column>
                <el-table-column prop="cname" label="客户名称">
                </el-table-column>
                <el-table-column prop="address" label="公司地址" width="500px">
                </el-table-column>
                <el-table-column prop="uname" label="联系人姓名">
                </el-table-column>
                <el-table-column prop="phone" label="联系人电话">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 编辑 -->
                        <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false">
                            <el-button type="primary" size="mini" @click="UpdatOrder(scope.$index, scope.row)">
                                <i class="el-icon-edit"></i>
                            </el-button>
                        </el-tooltip>
                        <!-- 发货 -->
                        <el-tooltip class="item" effect="dark" content="发货" placement="top" :enterable="false" v-if="scope.row.cond === 0">
                            <router-link :to="'/send_goods?orderID='+ scope.row.id">
                                <el-button type="warning" size="mini">
                                    <i class="el-icon-s-promotion"></i>
                                </el-button>
                            </router-link>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="get_order" @current-change="get_order" :current-page.sync="pagination.page" :page-sizes.sync="pagination.sizes" :page-size.sync="pagination.size" :layout.sync="pagination.layout" :total.sync="pagination.total" background>
                </el-pagination>
            </div>

        </el-card>
    </div>
</template>
<script>
import { order_info_get } from '../axios_api/api'
import moment from 'moment'
export default {
    data() {
        return {
            OrderList: [],
            timevalue: '',
            pagination: {
                layout: "total, sizes, prev, pager, next, jumper",
                sizes: [10, 20, 50, 100],
                page: 1,
                size: 10,
                total: 0,
            },
        }
    },
    mounted: function () {
        this.get_order();
    },
    methods: {
        PushAddOrder() {
					this.$router.push('/add_order')
        },

        handleClick() {

        },
        // 编辑订单
        UpdatOrder(index, data) {
            this.get_order();
        },
        // 分页每页展示数量变化是触发
        // currentChange() {
        //     this.get_order();
        // },
        // 页码发生变化时触发
        // sizeChange() {

        // },
        get_order() {
            let params = { page: this.pagination.page, size: this.pagination.size }
            order_info_get(params).then(resp => {
                if (resp.code === 200) {
                    for (let i = 0; i < resp.orderlist.length; i++) {
                        resp.orderlist[i].create_time = moment(resp.orderlist[i].create_time).format('YYYY-MM-DD HH:mm:ss')
                    }
                    this.OrderList = resp.orderlist
                    this.pagination.total = resp.total
                    console.log(this.OrderList)
                }
            })
        },
    }
}
</script>
<style>
.amap-demo {
    height: 300px;
}
</style>